<script type="text/ng-template" id="modals/galleryCreateNew">
  <div class="modal-header">
    <h3>
      <span ng-if="isUploadModal">Upload Exploration</span>
      <span ng-if="!isUploadModal">Create New Exploration</span>
    </h3>
  </div>

  <div class="modal-body">
    <div ng-if="isUploadModal">
      <em>
        This form allows you to upload the YAML file corresponding to an exploration. Currently, you will need to upload any associated image files separately in the relevant states.
      </em>
    </div>

    <br>

    <form role="form" class="form-horizontal">
      <fieldset>
        <div class="form-group" ng-class="{'has-error': !newExplorationTitle}">
          <label for="newExplorationTitle" class="col-lg-2 col-md-2 col-sm-2">
            Title
          </label>
          <div class="col-lg-10 col-md-10 col-sm-10">
            <input id="newExplorationTitle" type="text" class="form-control" ng-model="newExplorationTitle" name="newExplorationTitle" ng-change="isTitleValid(newExplorationTitle, true)" required focus-on="newExplorationModalOpened">
            <span style="color: red;" aria-live="assertive" ng-show="changedAtLeastOnce">
              <[warningText]>
            </span>
            <div ng-show="!warningText || !changedAtLeastOnce" style="height: 20px;">
            </div>
          </div>
        </div>

        <div ng-hide="isUploadModal">
          <div class="form-group">
            <label for="newExplorationObjective" class="col-lg-2 col-md-2 col-sm-2">
              Goal
            </label>
            <div class="col-lg-10 col-md-10 col-sm-10">
              <input id="newExplorationObjective" type="text" class="form-control" ng-model="newExplorationObjective" placeholder="What will this exploration help people to do?" name="newExplorationObjective">
            </div>
          </div>
        </div>

        <div class="form-group" ng-class="{'has-error': !newExplorationCategory}">
          <label for="newExplorationCategory" class="col-lg-2 col-md-2 col-sm-2">
            Category
          </label>
          <div class="col-lg-10 col-md-10 col-sm-10">
            <select2-dropdown item="newExplorationCategory" choices="categoriesForDropdown" placeholder="Select a category, or enter a new one" new-choice-regex="^[A-Z a-z]+$" width="300px" invalid-search-term-message="Invalid category name">
            </select2-dropdown>
          </div>
        </div>

        <div ng-hide="isUploadModal">
          <div class="form-group">
            <label for="newExplorationLanguageCode" class="col-lg-2 col-md-2 col-sm-2">
              Language
            </label>
            <div class="col-lg-10 col-md-10 col-sm-10">
              <select id="newExplorationLanguageCode" class="form-control" ng-model="newExplorationLanguageCode" ng-options="lc.code as lc.description for lc in getAllLanguageCodes()">
              </select>
            </div>
          </div>
        </div>

        <div ng-if="isUploadModal" class="form-group">
          <label for="newFileInput" class="col-lg-2 col-md-2 col-sm-2">
            Upload YAML file
          </label>
          <div class="col-lg-10 col-md-10 col-sm-10">
            <input id="newFileInput" type="file">
          </div>
        </div>
      </fieldset>
    </form>
  </div>
  <div class="modal-footer">
    <button class="btn btn-default protractor-test-cancel-create" ng-click="cancel()">Cancel</button>
    <button class="btn btn-success" type="submit" ng-click="save(newExplorationTitle, newExplorationCategory, newExplorationObjective, newExplorationLanguageCode)"
      ng-disabled="!isTitleValid(newExplorationTitle, false) || !newExplorationCategory || !newExplorationLanguageCode">
        Create New Exploration
    </button>
  </div>
</script>
